<template>
  <div>
  <el-card>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>公司历程管理</el-breadcrumb-item>
    <el-breadcrumb-item>公司历程列表 </el-breadcrumb-item>
  </el-breadcrumb>

    <el-button style="margin-bottom: 15px;margin-left: 10px"
               type="primary" @click="dialogAddVisible=true">增加
    </el-button>
  <el-row :gutter="20">
    <el-col :span="4" v-for="item in progressList" :key="item.id">
      <el-card >
        <el-card class="img-card"
         v-for="img in item.imgUrl" :key="img">
       <el-image :src="img" style='height: 50px'>
         <div slot="error" class="image-slot">
          图片已删除
         </div>
       </el-image>
          <el-button @click="deleteImg(item.id,img)"
                     type="danger" size="mini" style="margin: 20% 0 0 50%">删除</el-button>
        </el-card>
        <el-card class="createTime" style="height: 50px">{{item.createTime}}</el-card>
        <el-card  class="content" >{{item.content}}</el-card>
        <div class="btn">
          <el-button type="primary" @click="findProgressById(item.id)">修改</el-button>
          <el-button type="danger" @click="deleteProgress(item.id)">删除</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
  </el-card>
    <!--      历程修改对话框开始-->
    <el-dialog  :visible.sync="dialogEditVisible"  @close="clearFormData">
      <el-tag>创建时间</el-tag>
      <div>
        <el-date-picker
          type="date"
          v-model="progressFormData.createTime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <!-- 内容  -->
      <el-tag>主要内容</el-tag>
      <el-row>
        <el-col :span="8">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="progressFormData.content">
          </el-input>
        </el-col>
      </el-row>
      <el-tag>图片上传</el-tag>
      <div style="display: flex">
      <el-upload
        ref="upload"
        action="http://localhost:8085/upload"
        list-type="picture-card"
        :on-success="fileSuccess"
        :on-preview="handlePictureCardPreview"
        :multiple="true"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
      </el-dialog>
      </div>
      <el-row>
        <el-col :offset="18">
          <el-button type="primary" @click="updateProgress">修改</el-button>
          <el-button @click=" dialogEditVisible= false">取 消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!--     历程修改对话框结束-->

    <!--      历程增加对话框-->
    <el-dialog  :visible.sync="dialogAddVisible"  @close="clearFormData" >
      <el-tag>创建时间</el-tag>
      <div>
        <el-date-picker
          type="date"
          v-model="progressFormData.createTime"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <!-- 内容  -->
      <el-tag>主要内容</el-tag>
      <el-row>
        <el-col :span="8">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="progressFormData.content">
          </el-input>
        </el-col>
      </el-row>
      <el-tag>图片上传</el-tag>
      <el-upload
        ref="addUpload"
        action="http://localhost:8085/upload"
        list-type="picture-card"
        :on-success="fileSuccess"
        :on-preview="handlePictureCardPreview"
        :multiple="true"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-row>
        <el-col :offset="18">
          <el-button type="primary" @click="addProgress">增加</el-button>
          <el-button @click=" dialogAddVisible= false">取 消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!--      历程增加对话框结束-->
  </div>
</template>

<script>
import { request } from '@/network/request';
import { basePath } from '@/commom/commom';

export default {
  name: 'ProgressList',
  data() {
    return {
      progressList: [],
      dialogEditVisible: false,
      dialogAddVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      progressFormData: {
        id: '',
        createTime: '',
        imgUrl: [],
        content: '',
      },
    };
  },
  methods: {
    getProgressList() {
      request({
        url: 'http://localhost:8085/progress/list',
      }).then((res) => {
        this.progressList = res.data;
        for (let i = 0; i < res.data.length; i += 1) {
          const imgUrl = res.data[i].imgUrl.split(',');
          for (let j = 0; j < imgUrl.length; j += 1) {
            imgUrl[j] = basePath + imgUrl[j];
          }
          this.progressList[i].imgUrl = imgUrl;
        }
      });
    },
    findProgressById(id) {
      request({
        url: `${basePath}/progress/find/${id}`,
      }).then((res) => {
        this.progressFormData = res.data;
        const imgUrl = res.data.imgUrl.split(',');
        for (let j = 0; j < imgUrl.length; j += 1) {
          imgUrl[j] = basePath + imgUrl[j];
        }
        this.progressFormData.imgUrl = [];
        this.dialogEditVisible = true;
      });
    },
    deleteProgress(id) {
      request({
        url: `${basePath}/progress/delete/${id}`,
        method: 'delete',
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('删除失败');
        this.getProgressList();
        this.dialogEditVisible = false;
        return this.$message.success('删除成功');
      });
    },
    // 删除数组里的照片
    handleRemove(file) {
      this.progressFormData.imgUrl = this.progressFormData.imgUrl.filter((x) => x !== file.url);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    fileSuccess(file) {
      this.progressFormData.imgUrl.push(`${file.data[0]}`);
    },
    // 更新商品
    updateProgress() {
      this.progressFormData.imgUrl = this.progressFormData.imgUrl.toLocaleString();
      request({
        url: `${basePath}/progress/put`,
        method: 'put',
        params: this.progressFormData,
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('更新失败');
        this.getProgressList();
        this.dialogEditVisible = false;
        this.$refs.upload.clearFiles();
        return this.$message.success('更新成功');
      });
    },
    addProgress() {
      this.progressFormData.imgUrl = this.progressFormData.imgUrl.toLocaleString();
      this.progressFormData.createTime = this.progressFormData.createTime.toLocaleString();
      request({
        url: `${basePath}/progress/add`,
        method: 'post',
        params: this.progressFormData,
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('更新失败');
        this.getProgressList();
        this.dialogAddVisible = false;
        this.$refs.addUpload.clearFiles();
        this.clearFormData();
        return this.$message.success('更新成功');
      });
    },
    clearFormData() {
      this.progressFormData = {
        id: '',
        createTime: '',
        imgUrl: [],
        content: '',
      };
    },
    deleteImg(id, imgUrl) {
      const imgUrl1 = this.progressFormData.imgUrl.filter((x) => x !== imgUrl);
      request({
        url: `${basePath}/progress/delete/img`,
        method: 'put',
        params: {
          id,
          imgUrl: imgUrl1.toLocaleString(),
        },
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('删除失败');
        this.getProgressList();
        return this.$message.success('删除成功');
      });
    },
  },
  created() {
    this.getProgressList();
  },
};
</script>

<style scoped>

.btn{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.content{
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 82px;
}
.createTime{
  margin-top: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 10px;
  color: #909399;

}
.el-image{
  height: 100%;
  width: 100%;
}
.img-card{
  display: flex;
  justify-items: center;
  justify-content: center;
}

</style>
